<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-section">
				<picker 
					mode="selector"
					:range="unitList"
					range-key="name"
					:value="unitIndex"
					@change="onUnitChange"
					class="unit-picker"
				>
					<view class="unit-box">
						<text>{{ unitList[unitIndex].name }}</text>
						<text class="iconfont icon-arrow">&#xe6b9;</text>
					</view>
				</picker>
				<view class="uni-search-box">
					<input 
						class="uni-search-input"
						v-model="roomSearch"
						placeholder="房间号"
						placeholder-style="color: #999;"
						confirm-type="search"
						@confirm="searchByRoomName"
					/>
					<view class="uni-search-button" @click="searchByRoomName">搜索</view>
				</view>
			</view>
		</view>
		
		<!-- 房间状态统计 -->
		<view class="stats-cards">
			<view class="stat-card total" 
				:class="{'active': currentFilter === 'all'}" 
				@click="handleFilter('all')"
			>
				<view class="stat-value">{{ roomStats.totalRooms || 0 }}</view>
				<view class="stat-label">总房源</view>
			</view>
			<view class="stat-card rented" 
				:class="{'active': currentFilter === 'rented'}" 
				@click="handleFilter('rented')"
			>
				<view class="stat-value">{{ roomStats.rentedRooms || 0 }}</view>
				<view class="stat-label">在住房</view>
			</view>
			<view class="stat-card vacant" 
				:class="{'active': currentFilter === 'vacant'}" 
				@click="handleFilter('vacant')"
			>
				<view class="stat-value">{{ roomStats.idleRooms || 0 }}</view>
				<view class="stat-label">空置房</view>
			</view>
		</view>
		
		<!-- 房间列表 -->
		<view class="room-list-container">
			<view class="empty-box" v-if="roomList.length === 0">
				<image class="empty-image" src="/static/images/empty.png" mode="aspectFit"></image>
				<text class="empty-text">暂无房间数据</text>
			</view>
			<view class="room-list" v-else>
				<view class="room-item" v-for="(room, index) in roomList" :key="index" @click="goToRoomDetail(room)">
					<view class="room-card" :class="{'rented': room.tenantCount > 0, 'vacant': room.tenantCount == 0}">
						<!-- 房间标题和状态 -->
						<view class="room-header">
							<view class="room-name">{{ room.unitName || '' }}{{ room.floorName || '' }}{{ room.roomName || '' }}</view>
							<view class="room-status" :class="{'status-rented': room.tenantCount > 0, 'status-vacant': room.tenantCount == 0}">
								{{ room.tenantCount > 0 ? '在住' : '闲置' }}
							</view>
						</view>
						
						<!-- 房间详情信息 -->
						<view class="room-content">
							<!-- 租住信息 -->
							<view class="room-info">
								<view class="info-item">
									<text class="iconfont icon-account"></text>
									<text>{{ room.tenantCount || 0 }}人</text>
								</view>
								
								<!-- 电池信息 -->
								<view class="info-item battery-item" v-if="room.batteryLevel">
									<text :style="{color: getBatteryColor(room.batteryLevel)}">{{ room.batteryLevel }}%</text>
									<text class="iconfont icon-edit battery-edit" ></text>
								</view>
								
								<!-- MAC地址 -->
								<view class="info-item mac-item" v-if="room.mac">
									<text class="iconfont icon-mac"></text>
									<text>{{ room.mac }}</text>
								</view>
							</view>
							
							<!-- 锁状态信息 -->
						<!-- 	<view class="lock-status warning" v-if="!room.mac">
								<text class="iconfont icon-error" style="color: #F56C6C;"></text>
								<text>无锁</text>
							</view> -->
					<!-- 		<view class="lock-status warning" v-else-if="!room.batteryLevel">
								<text class="iconfont icon-warning" style="color: #E6A23C;"></text>
								<text>锁未激活</text>
							</view> -->
						<!-- 	<view class="lock-status normal" >
								<text class="iconfont icon-check" style="color: #67C23A;"></text>
								<text>正常</text>
							</view> -->
						</view>
						
					</view>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="load-more" v-if="roomList.length > 0">
				<view class="uni-loadmore" v-if="loadMoreStatus === 'loadmore'">
					<view class="uni-loadmore-text" @click="loadMore">点击加载更多</view>
				</view>
				<view class="uni-loadmore" v-else-if="loadMoreStatus === 'loading'">
					<view class="uni-loading"></view>
					<text class="uni-loadmore-text">加载中...</text>
				</view>
				<view class="uni-loadmore" v-else>
					<text class="uni-loadmore-text">没有更多数据了</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { listHome3 } from "@/api/lock/home";
	import { roomStatistics } from "@/api/lock/menu";
	import { getLockUnitList } from '@/api/lock/lock';
	
	export default {
		data() {
			return {
				roomSearch: '', // 房间号搜索关键词
				roomList: [], // 房间列表
				roomStats: {
					totalRooms: 0,
					rentedRooms: 0,
					idleRooms: 0
				},
				currentFilter: 'all', // 当前过滤状态: all, rented, vacant
				unitList: [{ id: '', name: '全部楼栋' }],
				unitIndex: 0,
				queryParams: {
					roomName: null,
					mac: null,
					pageNum: 1,
					pageSize: 10,
					tenantCount: null,
					unitId: null
				},
				total: 0,
				loading: false,
				loadMoreStatus: 'loadmore', // loadmore, loading, nomore
			}
		},
		onLoad(options) {
			// 从链接参数获取过滤条件
			if (options.filter) {
				this.currentFilter = options.filter;
				this.applyFilter(options.filter);
			}
			
			// 从链接参数获取搜索条件
			if (options.roomName) {
				this.roomSearch = options.roomName;
				this.queryParams.roomName = options.roomName;
			}
			
			// 加载数据
			this.loadInitialData();
			this.getUnitList();
		},
		onPullDownRefresh() {
			// 下拉刷新
			this.refreshData().finally(() => {
				// 停止下拉刷新动画
				uni.stopPullDownRefresh();
			});
		},
		onReachBottom() {
			// 触底加载更多
			this.loadMore();
		},
		methods: {
			// 加载初始数据
			loadInitialData() {
				this.loading = true;
				Promise.all([
					this.getRoomList(),
					this.getRoomStats()
				]).then(() => {
					this.loading = false;
				}).catch(error => {
					console.error("加载数据出错", error);
					this.loading = false;
					uni.showToast({
						title: '加载数据失败',
						icon: 'none'
					});
				});
			},
			
			// 刷新数据
			refreshData() {
				// 重置分页参数
				this.queryParams.pageNum = 1;
				
				// 保持当前筛选条件
				const currentUnit = this.unitList[this.unitIndex];
				this.queryParams = {
					...this.queryParams,
					pageNum: 1,
					unitId: currentUnit.id || null
				};
				
				// 返回Promise以便在刷新完成后停止下拉动画
				return Promise.all([
					this.getRoomList(),
					this.getRoomStats()
				]).then(() => {
					// 刷新成功
					uni.showToast({
						title: '刷新成功',
						icon: 'success',
						duration: 1500
					});
				}).catch(error => {
					console.error("刷新数据出错", error);
					uni.showToast({
						title: '刷新失败',
						icon: 'none'
					});
				});
			},
			
			// 获取房间列表
			getRoomList() {
				return new Promise((resolve, reject) => {
					console.log('发送请求的参数：', this.queryParams);
					listHome3(this.queryParams).then(response => {
						console.log('获取到的响应：', response);
						if (this.queryParams.pageNum === 1) {
							this.roomList = response.rows || [];
						} else {
							this.roomList = [...this.roomList, ...(response.rows || [])];
						}
						
						this.total = response.total || 0;
						
						if (this.roomList.length >= this.total) {
							this.loadMoreStatus = 'nomore';
						} else {
							this.loadMoreStatus = 'loadmore';
						}
						
						resolve(response);
					}).catch(error => {
						console.error('获取房间列表失败：', error);
						reject(error);
					});
				});
			},
			
			// 获取房间统计数据
			getRoomStats() {
				const currentUnit = this.unitList[this.unitIndex];
				const params = {
					unitId: currentUnit.id || null
				};
				
				// 如果有房间号搜索条件，添加到统计参数中
				if (this.queryParams.roomName) {
					params.roomName = this.queryParams.roomName;
				}
				// 如果有MAC地址搜索条件，添加到统计参数中
				if (this.queryParams.mac) {
					params.mac = this.queryParams.mac;
				}
				// 如果有租住状态条件，添加到统计参数中
				if (this.queryParams.tenantCount !== null) {
					params.tenantCount = this.queryParams.tenantCount;
				}
				
				return new Promise((resolve, reject) => {
					roomStatistics(params).then(response => {
						this.roomStats = response.data;
						resolve(response);
					}).catch(error => {
						reject(error);
					});
				});
			},
			
			// 加载更多
			loadMore() {
				if (this.loadMoreStatus === 'nomore' || this.loading) return;
				
				this.loadMoreStatus = 'loading';
				this.queryParams.pageNum += 1;
				this.getRoomList().then(() => {
					if (this.roomList.length >= this.total) {
						this.loadMoreStatus = 'nomore';
					} else {
						this.loadMoreStatus = 'loadmore';
					}
				});
			},
			
			// 获取单元列表
			getUnitList() {
				getLockUnitList().then(res => {
					if (res.code === 200 && res.rows) {
						this.unitList = [
							{ id: '', name: '全部楼栋' },
							...res.rows
						];
					}
				}).catch(err => {
					console.error('获取单元列表失败', err);
				});
			},

			// 处理单元选择变化
			onUnitChange(e) {
				this.unitIndex = Number(e.detail.value);
				const selectedUnit = this.unitList[this.unitIndex];
				this.queryParams.unitId = selectedUnit.id || null;
				this.queryParams.pageNum = 1;
				
				Promise.all([
					this.getRoomList(),
					this.getRoomStats()  // 同时更新统计数据
				]);
			},

			// 搜索方法
			searchByRoomName() {
				const currentUnit = this.unitList[this.unitIndex];
				
				// 重置查询参数，但保留单元ID
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					roomName: null,
					mac: null,
					tenantCount: null,
					unitId: currentUnit.id || null
				};
				
				const searchText = this.roomSearch.trim();
				
				if (!searchText) {
					Promise.all([
						this.getRoomList(),
						this.getRoomStats()  // 同时更新统计数据
					]);
					return;
				}
				
				if (searchText.includes(':')) {
					this.queryParams.mac = searchText;
				} else {
					this.queryParams.roomName = searchText;
				}
				
				uni.showLoading({
					title: '搜索中...'
				});
				
				Promise.all([
					this.getRoomList(),
					this.getRoomStats()  // 同时更新统计数据
				]).then(() => {
					uni.hideLoading();
					if (this.total === 0) {
						uni.showToast({
							title: this.queryParams.mac ? '未找到该MAC地址的房间' : '未找到该房间',
							icon: 'none'
						});
					}
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						title: '搜索失败，请稍后重试',
						icon: 'none'
					});
					console.error("搜索房间出错：", error);
				});
			},
			
			// 房间过滤
			handleFilter(type) {
				this.currentFilter = type;
				const currentUnit = this.unitList[this.unitIndex];
				
				// 重置搜索和分页，但保留单元ID
				this.roomSearch = '';
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					roomName: null,
					mac: null,
					tenantCount: null,
					unitId: currentUnit.id || null
				};
				
				this.applyFilter(type);
				Promise.all([
					this.getRoomList(),
					this.getRoomStats()  // 同时更新统计数据
				]);
			},
			
			// 应用过滤条件
			applyFilter(type) {
				switch (type) {
					case 'rented':
						this.queryParams.tenantCount = 1; // 已租
						break;
					case 'vacant':
						this.queryParams.tenantCount = 0; // 闲置
						break;
					default:
						this.queryParams.tenantCount = null; // 全部
						break;
				}
			},
			
			// 前往房间详情
			goToRoomDetail(room) {
				// if (!room.mac) {
				// 	uni.showToast({
				// 		title: '房间无锁，不能进入',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				
				// if (room.mac && !room.batteryLevel) {
				// 	uni.showToast({
				// 		title: '锁未激活，请先激活锁',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				
				uni.navigateTo({
					url: `/pages/room/details?id=${room.id}`
				});
			},
			
			// 获取电池颜色
			getBatteryColor(level) {
				if (level >= 80) {
					return '#67C23A';
				} else if (level >= 50) {
					return '#E6A23C';
				} else {
					return '#F56C6C';
				}
			}
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: "iconfont";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 24px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #409EFF;
	}

	.icon-account:before {
		content: "\e617";
	}

	.icon-battery:before {
		content: "\e60c";
	}

	.icon-error:before {
		content: "\e63f";
	}

	.icon-warning:before {
		content: "\e73d";
	}

	.icon-check:before {
		content: "\e659";
	}

	.icon-mac:before {
		content: "\e6df";
	}

	.icon-edit:before {
		content: "\e66e";
	}

	.content {
		padding: 20rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
	}
	
	.search-box {
		margin-bottom: 30rpx;
		background: #FFFFFF;
		padding: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		
		.search-section {
			display: flex;
			align-items: stretch;
			gap: 2rpx;
			background: #f5f7fa;
			border-radius: 35rpx;
			padding: 0;
		}
		
		.unit-picker {
			width: 240rpx;
			flex-shrink: 0;
		}
		
		.unit-box {
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			background: #f5f7fa;
			border-radius: 35rpx 0 0 35rpx;
			font-size: 28rpx;
			color: #333;
			transition: all 0.3s;
			
			&:active {
				background: #e8ebf0;
			}
			
			text {
				&:first-child {
					max-width: 160rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					padding-right: 10rpx;
				}
			}
			
			.icon-arrow {
				font-size: 24rpx;
				color: #666;
				margin-left: 8rpx;
				flex-shrink: 0;
			}
		}
		
		.uni-search-box {
			flex: 1;
			display: flex;
			height: 70rpx;
			background: #f5f7fa;
			overflow: hidden;
			transition: all 0.3s;
			
			&:active {
				background: #e8ebf0;
			}
		}
		
		.uni-search-input {
			flex: 1;
			height: 70rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			background: transparent;
		}
		
		.uni-search-button {
			width: 120rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			color: #FFFFFF;
			background: #409EFF;
			transition: all 0.3s;
			border-radius: 0 35rpx 35rpx 0;
			
			&:active {
				background: #3a8ee6;
			}
		}
	}
	
	.stats-cards {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0;
	}
	
	.stat-card {
		width: 30%;
		height: 160rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
		
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 6rpx;
			background: #FFFFFF;
			transition: all 0.3s ease;
			border-radius: 3rpx;
		}
		
		&.active {
			transform: translateY(-4rpx);
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
			
			&::after {
				width: 60%;
			}
		}
		
		&.total {
			background: linear-gradient(135deg, #409EFF, #1980FF);
			
			&:active {
				background: linear-gradient(135deg, #3a8ee6, #1873e6);
			}
		}
		
		&.rented {
			background: linear-gradient(135deg, #67C23A, #4CAF50);
			
			&:active {
				background: linear-gradient(135deg, #5daf34, #449d48);
			}
		}
		
		&.vacant {
			background: linear-gradient(135deg, #E6A23C, #FF9800);
			
			&:active {
				background: linear-gradient(135deg, #cf9136, #e68900);
			}
		}
		
		.stat-value {
			font-size: 48rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
		
		.stat-label {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.9);
			margin-top: 10rpx;
		}
	}
	
	.room-list-container {
		margin-top: 30rpx;
	}
	
	.empty-box {
		padding: 100rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.empty-image {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 20rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
	
	.room-list {
		.room-item {
			margin-bottom: 30rpx;
		}
		
		.room-card {
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 20rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
			border-left: 8rpx solid #ccc;
			
			&.rented {
				border-left-color: #67C23A;
			}
			
			&.vacant {
				border-left-color: #E6A23C;
			}
			
			.room-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #f2f2f2;
				
				.room-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.room-status {
					padding: 6rpx 20rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					
					&.status-rented {
						background-color: rgba(103, 194, 58, 0.1);
						color: #67C23A;
					}
					
					&.status-vacant {
						background-color: rgba(230, 162, 60, 0.1);
						color: #E6A23C;
					}
				}
			}
			
			.room-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				
				.room-info {
					display: flex;
					flex: 1;
					
					.info-item {
						display: flex;
						align-items: center;
						margin-right: 20rpx;
						font-size: 28rpx;
						color: #666;
						
						.iconfont {
							margin-right: 10rpx;
						}
						
						&.battery-item {
							position: relative;
							padding-right: 30rpx;
							
							.battery-edit {
								position: absolute;
								right: 0;
								top: 50%;
								transform: translateY(-50%);
								font-size: 24rpx;
								color: #909399;
								padding: 4rpx;
							}
						}
						
						&.mac-item {
							font-size: 24rpx;
							color: #909399;
							
							.iconfont {
								font-size: 24rpx;
								color: #909399;
							}
						}
					}
				}
				
				.lock-status {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #666;
					padding: 6rpx 16rpx;
					border-radius: 10rpx;
					
					.iconfont {
						margin-right: 10rpx;
					}
					
					&.warning {
						background-color: rgba(230, 162, 60, 0.05);
					}
					
					&.normal {
						background-color: rgba(103, 194, 58, 0.05);
					}
				}
			}
			
			.room-footer {
				padding-top: 20rpx;
				border-top: 1px solid #f2f2f2;
				
				.action-hint {
					font-size: 24rpx;
					color: #909399;
				}
			}
		}
	}
	
	.uni-loadmore {
		display: flex;
		flex-direction: row;
		height: 80rpx;
		align-items: center;
		justify-content: center;
	}
	
	.uni-loadmore-text {
		font-size: 28rpx;
		color: #999;
	}
	
	.uni-loading {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		border: 2px solid #ccc;
		border-top-color: #409EFF;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
</style>
